<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link href="${pageContext.request.contextPath}/css/myorder/order_details.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js" rel="stylesheet"></script>

</head>

<body>
<!--===================1.头部导航 nav=================-->
<c:import url="/header/header1.jsp"/>
<div class="custom-cont">
<%--    ${serverResponse}--%>
<%--    ${serverResponse.data}--%>
<%--    ${serverResponse.data.myorder.travelSightsId}--%>
    <div class="wrapper">
        <div class="title">
            <p>
                <a href="">我的订单</a>
                <i>></i>
                <a href="">订单详情</a>
            </p>
        </div>
        <div class="order-detail">

            <c:if test="${serverResponse.data.myorder.myorderStatus}==0">
                <%--待支付--%>
                <div class="status">
                    <div class="t1">
                        待支付
                        <span>剩余
                            <i class="status_tip_countdown"></i>
                            逾期未支付订单将自动关闭</span>
                    </div>
                    <div class="t2">
                        订单号
                        <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>
                        <span class="m-2">下单时间</span>
                            <%--                    ${serverResponse.data.myorder.myorderPrice}--%>

                        <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                    </div>
                    <div class="aside">
                        <p>总金额
                            <i>￥</i>
                            <strong>${serverResponse.data.myorder.myorderPrice}</strong>
                        </p>

                        <div class="btns">
                            <form name="form1" action="<%=request.getContextPath() %>/ali/pay" method="post">
                                <input type="hidden" name="orderId" value="bbbee58b27dc4bf682d8719"/>
                                <input type="hidden" name="productName" value="景点门票"/>
                                <input type="hidden" name="myorderPrice" value="20.0"/>
                                <a href="javascript:document.form1.submit();" style="text-decoration: none; background-color: #38c4ff; color: #fff;">去支付</a>
                            </form>

                            <input type="submit" style="background-color:#38c4ff;border: 1px solid #38c4ff;cursor: pointer" value="去支付" />
                            <a href="" style="text-decoration: none; background-color: #38c4ff; color: #fff;">去支付</a>

                            <a href="">取消订单</a>
                        </div>
                    </div>
                </div>
            </c:if>

            <c:if test="${serverResponse.data.myorder.myorderStatus}==1">
                <%--待出行--%>
                <div class="status">
                    <div class="t1">
                        预约成功
                        <span>商家已出票，如未收到请及时联系商家</span>
                    </div>
                    <div class="t2">
                        订单号
                        <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>
                        <span class="m-2">下单时间</span>
                            <%--                    ${serverResponse.data.myorder.myorderPrice}--%>

                        <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                    </div>
                    <div class="aside">
                        <p>总金额
                            <i>￥</i>
                            <strong>${serverResponse.data.myorder.myorderPrice}</strong>
                        </p>
                    </div>
                </div>
            </c:if>

            <c:if test="${serverResponse.data.myorder.myorderStatus}==3">
                <%--取消/退款--%>
                <div class="status">
                    <div class="t1">
                        已关闭
                        <span>超时未支付，订单已自动关闭</span>
                    </div>
                    <div class="t2">
                        订单号
                        <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>
                        <span class="m-2">下单时间</span>
                            <%--                    ${serverResponse.data.myorder.myorderPrice}--%>

                        <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
                    </div>
                    <div class="aside">
                        <p>总金额
                            <i>￥</i>
                            <strong>${serverResponse.data.myorder.myorderPrice}</strong>
                        </p>

                        <div class="btns">
                            <a href="${pageContext.request.contextPath}/sights/details/'+ ${serverResponse.data.myorder.travelSightsId} +'" >重新购买</a>
                        </div>
                    </div>
                </div>
            </c:if>

        </div>
    </div>
    <div class="items">
        <div class="hd">产品信息</div>
        <div class="item">
            <div class="title">
                <a href="">${serverResponse.data.travelSights.travelSightsName}</a>
            </div>
            <div class="desc">
                全天票 门票
                <span>
                        <fmt:formatDate value="${serverResponse.data.myorder.myorderStartDate}" pattern="yyyy-MM-dd"/>
                    </span>
<%--                <div class="btns"><a href="">申请退款</a></div>--%>
            </div>
        </div>
        <div class="item">
            <div class="desc">
                <span class="tit">门票</span>
                ￥${serverResponse.data.travelSights.travelTicketsPrice}  &nbsp  &nbsp &nbsp *<span class="total" style="display: inline-block;text-align: center"></span>
                <div class="rText">
                    价格：
                    <span class="orange">￥${serverResponse.data.myorder.myorderPrice}</span>
                </div>
            </div>
        </div>

    </div>
    <div class="ode-info">
        <h2>联系人信息</h2>
        <!--<h3>北京-三亚 / 8日*定制游</h3>-->
        <div class="time-num">
                <span>
                    中文姓名：
                    <em>${serverResponse.data.customer.custName}</em>
                </span>
            <br>
            <span>联系电话：
                    <em>${serverResponse.data.customer.custTelno}</em>
                </span>
        </div>
    </div>
    <div class="items">
        <div class="hd">出行人信息</div>
        <div class="clearfix">
                <c:forEach var="a" items="${serverResponse.data.myorderTravelerList}">
                    <div class="userInfo">
                        <p class="tit">出行人</p>
                        <p>
                            <span class="dt">中文姓名：</span>
                            ${a.travelerName}
                        </p>
                        <p>
                            <span class="dt">证件类型：</span>
                            身份证
                        </p>
                        <p>
                            <span class="dt">身份证：</span>
                            ${a.travelerIdcard}
                        </p>
                    </div>
                </c:forEach>


            <div class="userInfo">
                <p class="tit">行程信息</p>
                <p>
                    <span class="dt">出行人数：</span>
                    ${fn:length(serverResponse.data.myorderTravelerList)}
                </p>
            </div>
        </div>
    </div>
</div>

<script>

    // $(".order-detail").html("");//清空html
    var status = null;

    var myorderStatus = "${serverResponse.data.myorder.myorderStatus}";
    console.log(myorderStatus);

    var myorderNo = "${serverResponse.data.myorder.myorderNo}";
    console.log(myorderNo);

    var myorderPrice = "${serverResponse.data.myorder.myorderPrice}";
    console.log(myorderPrice);


    if(myorderStatus == 0){
        //待支付
        status = '<div class="status">' +
            '                <div class="t1">' +
            '                    待支付' +
            '                    <span>剩余' +
            '                            <i class="status_tip_countdown"></i>' +
            '逾期未支付订单将自动关闭</span>' +
            '                </div>' +
            '                <div class="t2">' +
            '                    订单号' +
            '                    <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>' +
            '                    <span class="m-2">下单时间</span>' +
            '                    <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>' +
            '                </div>' +
            '                <div class="aside">' +
            '                    <p>总金额' +
            '                        <i>￥</i>' +
            '                        <strong>${serverResponse.data.myorder.myorderPrice}</strong>' +
            '                    </p>' +
            '                    <div class="btns">' +
            '                        <form name="form1" action="<%=request.getContextPath() %>/ali/pay" method="post">' +
            '                            <input type="hidden" name="orderId" value="' + myorderNo +'"/>' +
            '                            <input type="hidden" name="productName" value="景点门票"/>' +
            '                            <input type="hidden" name="myorderPrice" value="' + myorderPrice + '"/>' +
            '                            <a href="javascript:document.form1.submit();" style="text-decoration: none; background-color: #38c4ff; color: #fff;">去支付</a>\n' +
            '                        </form>' +

            '                <form action="${pageContext.request.contextPath}/cancel/'+ myorderNo +'" method="post">' +
            '                    <input type="hidden" name="_method" value="PUT">' +
            '                    <input type="submit" style="background-color: transparent;border: none;cursor: pointer" value="取消订单">' +
            '                </form>' +
            '                    </div>' +
            '                </div>' +
            '            </div>';

        function remainingTime() {
            var currentTime = new Date();  // 当前时间
            console.log("currentTime-------" + currentTime);
            var orderTime = new Date("${serverResponse.data.myorder.myorderDate}");  // 下单时间
            var hh = orderTime.getTime()  + 30*60*1000 - 14*60*60*1000;
            var jj = new Date(hh);

            var timeDifference = jj.getTime() - currentTime.getTime() ;


            var displayTime = timeDifference / 1000;
            var leftHour = displayTime / ( 60 * 60 ) % 24;  // 小时
            leftHour = Math.floor(leftHour);
            var leftMinute = displayTime / 60 % 60;  // 分钟
            leftMinute = Math.floor(leftMinute);
            var leftSecond = displayTime % 60;  // 秒
            leftSecond = Math.floor(leftSecond);
            // var elementById = document.getElementById(".status_tip_countdown");
            if (timeDifference > 0 ){
                displayTime = leftHour + ":" + leftMinute + ":" + leftSecond + ":";
            }else {
                displayTime = "00:00:00"
            }
            $(".status_tip_countdown").html(displayTime)
            // elementById.innerHTML = leftHour + ":" + leftMinute + ":" + leftSecond + ":";
            // elementById.innerHTML = displayTime;
        }

        setInterval(remainingTime,1000);

    }else if (myorderStatus == 1){
        status = '<div class="status">' +
            '                <div class="t1">' +
            '                    预约成功' +
            '                    <span>商家已出票，如未收到请及时联系商家</span>' +
            '                </div>' +
            '                <div class="t2">' +
            '                    订单号' +
            '                    <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>' +
            '                    <span class="m-2">下单时间</span>' +
            '                    <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>' +
            '                </div>' +
            '                <div class="aside">' +
            '                    <p>总金额' +
            '                        <i>￥</i>' +
            '                        <strong>${serverResponse.data.myorder.myorderPrice}</strong>' +
            '                    </p>' +
            '                </div>' +
            '            </div>';
    }else if (myorderStatus == 3){
        status = '<div class="status">' +
            '                <div class="t1">' +
            '                    已关闭' +
            '                    <span>超时未支付，订单已自动关闭</span>' +
            '                </div>' +
            '                <div class="t2">' +
            '                    订单号' +
            '                    <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>' +
            '                    <span class="m-2">下单时间</span>' +
            '                    <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>' +
            '                </div>' +
            '                <div class="aside">' +
            '                    <p>总金额' +
            '                        <i>￥</i>' +
            '                        <strong>${serverResponse.data.myorder.myorderPrice}</strong>' +
            '                    </p>' +
            '                    <div class="btns">' +
            '                        <a href="${pageContext.request.contextPath}/sights/details/'+ ${serverResponse.data.myorder.travelSightsId} +'">重新购买</a>' +
            '                    </div>' +
            '                </div>' +
            '            </div>';
    }else {
        status = ' <%--待评价--%>\n' +
            '                <div class="status">\n' +
            '                    <div class="t1">\n' +
            '                        预约成功\n' +
            '                        <span>商家已出票，如未收到请及时联系商家</span>\n' +
            '                    </div>\n' +
            '                    <div class="t2">\n' +
            '                        订单号\n' +
            '                        <span class="m-1">${serverResponse.data.myorder.myorderNo}</span>\n' +
            '                        <span class="m-2">下单时间</span>\n' +
            '                            <%--                    ${serverResponse.data.myorder.myorderPrice}--%>\n' +
            '\n' +
            '                        <span class="m-3"><fmt:formatDate value="${serverResponse.data.myorder.myorderDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>\n' +
            '                    </div>\n' +
            '                    <div class="aside">\n' +
            '                        <p>总金额\n' +
            '                            <i>￥</i>\n' +
            '                            <strong>${serverResponse.data.myorder.myorderPrice}</strong>\n' +
            '                        </p>\n' +
            '                    </div>\n' +
            '                </div>';
    }

    $(".order-detail").append(status);//追加li到ul中

    var total = ${serverResponse.data.myorder.numberAdults} + ${serverResponse.data.myorder.numberChild};
    console.log("total:===========================" + total);
    console.log("类型：" + typeof (total));
    console.log(typeof (${serverResponse.data.myorder.numberAdults}));
    console.log(typeof (${serverResponse.data.myorder.numberChild}));

    $(".total").text(total);


</script>

</body>
</html>




<%--    <div class="ode-demand">--%>
<%--         <h2>定制需求</h2>--%>
<%--         <div class="custom-demand">--%>
<%--             <ul>--%>
<%--                 <li>--%>
<%--                     <span>出游性质</span>--%>
<%--                     <em>个人定制</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>出发地</span>--%>
<%--                     <em>北京</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>目的地</span>--%>
<%--                     <em>三亚</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>往返时间</span>--%>
<%--                     <em>2021-10-17 至 2021-10-24</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>出行人数</span>--%>
<%--                     <em>2成人</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>人均预算</span>--%>
<%--                     <em>无明确预算</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>联系人</span>--%>
<%--                     <em>王*</em>--%>
<%--                 </li>--%>
<%--                 <li>--%>
<%--                     <span>联系电话</span>--%>
<%--                     <em>*******4313</em>--%>
<%--                 </li>--%>
<%--             </ul>--%>
<%--         </div>--%>
<%--     </div>--%>